<template>
  <!-- 见证记录 -->
  <el-dialog :title="headerTitle" :visible.sync="visible" width="930px" @close="closeFn">
    <!-- 项目信息 -->
    <div class="ui-title ui-mt10">
      <span>项目信息</span>
    </div>
    <!-- {{ detailData.projectInfoArr }}
    {{ detailData.witnessProjectInfoList }} -->
    <el-table :data="detailData.projectInfoArr" :merge-columns="mergeColumns" border stripe>
      <el-table-column prop="index" align="center" label="序号" width="55">
        <template slot-scope="scope">
          <div>{{ (scope.row.index = 1) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" min-width="55" />
      <el-table-column prop="projectCode" label="项目编号" min-width="55" />
      <el-table-column prop="bidSectionName" label="标段名称" min-width="55" />
      <el-table-column prop="bidSectionCode" label="标段编号" min-width="55" />
    </el-table>
    <!-- <el-table :data="detailData.witnessProjectInfoList" border stripe>
      <el-table-column type="index" align="center" label="序号" width="55">
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" min-width="55">
      </el-table-column>
      <el-table-column prop="projectCode" label="项目编号" min-width="55">
      </el-table-column>
      <el-table-column prop="bidSectionName" label="标段名称" min-width="55">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.bidSectionInfoList"
            :key="index"
          >
            {{ index > 0 ? "," : "" }}{{ item.bidSectionName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="bidSectionCode" label="标段编号" min-width="55">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.bidSectionInfoList"
            :key="index"
            >{{ index > 0 ? ", " : "" }} {{ item.bidSectionCode }}
          </span>
        </template>
      </el-table-column>
    </el-table> -->
    <!-- 基本信息 -->
    <div class="ui-title ui-mt10">
      <span>基本信息</span>
      <el-button class="float-right" type="text" size="default" @click="BaseInfoVisible = !BaseInfoVisible">
        {{ BaseInfoVisible ? "收起" : "展开" }}
        <i :class="[!BaseInfoVisible ? 'el-icon-arrow-down' : 'el-icon-arrow-up']" />
      </el-button>
    </div>
    <!-- {{ detailData.witnessTaskBaseInfo }} -->
    <div v-if="BaseInfoVisible && detailData.witnessTaskBaseInfo" class="ui-table">
      <table style="width: 100%">
        <colgroup>
          <col name="el-table_column_1" width="110" />
          <col name="el-table_column_2" min-width="126" />
          <col name="el-table_column_3" width="110" />
          <col name="el-table_column_4" min-width="126" />
        </colgroup>
        <!-- bidOpenAddress 开标地点
bidOpenEndTime 开标结束时间
bidOpenStartTime 开标开始时间
evaluationAddress 评标地点
evaluationEndTime 评标结束时间
evaluationStartTime 评标开始时间
industry 行业
industryType 行业类型
projectCreateTime 项目入场时间
sourceSystemName 来源系统
tenderAgencyCode 代理机构编码
tenderAgencyContact 代理机构联系方式
tenderAgencyName 代理机构名称
tenderAgencyUserName 代理机构联系人
tenderMode 交易方式
tendererCode 招标机构名称
tendererContact 招标机构联系方式
tendererName 招标机构名称
tendererUserName 招标机构联系人
witnessEndTime 见证结束时间
witnessStartTime 见证开始时间
 -->
        <tbody class="body">
          <tr v-if="detailData.witnessTaskBaseInfo.witnessUserName || detailData.witnessTaskBaseInfo.witnessLinkCode">
            <th class="el-table_column_1 el-table__column">任务阶段</th>
            <td class="el-table_column_2">
              {{ detailData.witnessTaskBaseInfo.witnessLinkCode | witnessLinkCode }}
            </td>
            <th class="el-table_column_3 el-table__column">见证人</th>
            <td class="el-table_column_4">
              {{ detailData.witnessTaskBaseInfo.witnessUserName }}
            </td>
          </tr>
          <tr>
            <th class="el-table_column_1 el-table__column">项目来源</th>
            <td class="el-table_column_2">
              {{ detailData.witnessTaskBaseInfo.sourceSystemName }}
            </td>
            <th class="el-table_column_3 el-table__column">项目进场时间</th>
            <td class="el-table_column_4">
              {{ detailData.witnessTaskBaseInfo.projectCreateTime }}
            </td>
          </tr>
          <tr>
            <th>行业类型</th>
            <td>
              {{ industryFn(detailData.witnessTaskBaseInfo.industryType) }}
            </td>
            <th>行业类别</th>
            <td>{{ industryFn(detailData.witnessTaskBaseInfo.industry) }}</td>
          </tr>
          <tr>
            <th>交易方式</th>
            <td colspan="3">
              {{ tenderModeFn(detailData.witnessTaskBaseInfo.tenderMode) }}
            </td>
          </tr>
          <tr>
            <th>招标单位</th>
            <td colspan="3">
              {{ detailData.witnessTaskBaseInfo.tendererName }}
            </td>
          </tr>
          <tr>
            <th>招标单位联系人</th>
            <td>{{ detailData.witnessTaskBaseInfo.tendererUserName }}</td>
            <th>联系电话</th>
            <td>{{ detailData.witnessTaskBaseInfo.tendererContact }}</td>
          </tr>
          <tr>
            <th>代理机构</th>
            <td colspan="3">
              {{ detailData.witnessTaskBaseInfo.tenderAgencyName }}
            </td>
          </tr>
          <tr>
            <th>代理机构联系人</th>
            <td>{{ detailData.witnessTaskBaseInfo.tenderAgencyUserName }}</td>
            <th>联系电话</th>
            <td>{{ detailData.witnessTaskBaseInfo.tenderAgencyContact }}</td>
          </tr>
          <tr v-if="detailData.witnessTaskBaseInfo.bidOpenStartTime">
            <th>开标日期</th>
            <td>{{ detailData.witnessTaskBaseInfo.bidOpenStartTime }}</td>
            <th>开标地点</th>
            <td>{{ detailData.witnessTaskBaseInfo.bidOpenAddress }}</td>
          </tr>
          <tr v-if="detailData.witnessTaskBaseInfo.evaluationStartTime">
            <th>评标日期</th>
            <td>{{ detailData.witnessTaskBaseInfo.evaluationStartTime }}</td>
            <th>评标地点</th>
            <td>{{ detailData.witnessTaskBaseInfo.evaluationAddress }}</td>
          </tr>
          <tr>
            <th>见证开始时间</th>
            <td>{{ detailData.witnessTaskBaseInfo.witnessStartTime }}</td>
            <th>见证结束时间</th>
            <td>{{ detailData.witnessTaskBaseInfo.witnessEndTime }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 详情 -->
    <template v-if="headerTitle == '详情' || headerTitle == '项目详情'">
      <div class="ui-title ui-mt10">
        <span>任务详情</span>
      </div>
      <el-table :data="detailData.systemOperateLogList" border stripe>
        <el-table-column type="index" label="序号" align="center" width="55">
          <template slot-scope="scope">
            {{ (pageObj.currentPage - 1) * pageObj.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="operateTime" label="时间" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.operateTime" class="format-time">
              <div v-for="item in scope.row.operateTime.split(' ')" :key="item">
                {{ item }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="operateDesc" label="详情" min-width="150" />
      </el-table>
    </template>
    <!-- 见证记录 -->
    <template v-if="headerTitle == '审核见证记录' || headerTitle == '查看见证记录'">
      <template v-if="rowData.witnessSubTaskStatusEnum == 'WITNESS_UN_REVIEWED'">
        <div class="daishenhe-tag">
          <i class="icon-daishenhe" />
        </div>
      </template>
      <!-- 已完成展示状态图标 -->
      <template v-if="rowData.witnessSubTaskStatusEnum == 'WITNESS_FINISHED'">
        <div class="daishenhe-tag">
          <i class="icon-daishenhe" />
        </div>
      </template>
      <div class="ui-title ui-mt10">
        <span>见证记录</span>
      </div>
      <!-- stripe -->
      <el-table :data="recordData" :row-class-name="rowClassNameFn">
        <el-table-column v-if="headerTitle == '审核见证记录'" label="选择" width="55">
          <template slot-scope="scope">
            <!-- {{ scope.row.data.dataStatus }}
            {{ scope.row.data.recordId }} -->
            <!-- v-if="scope.row.data.dataStatus != 'VALID'" -->
            <!-- 系统和用户冲突显示  怎么判断2个一组-->
            <!-- {{ recordSelected[scope.row.data.parentItemCode] }} -->
            <el-radio
              v-if="scope.row.className"
              :key="scope.row.data.recordId"
              v-model="recordSelected[scope.row.data.parentItemCode]"
              :label="scope.row.data.recordId"
            >
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class=" ">
              <!-- {{ props.row.recordInfos }} -->
              <el-table :data="props.row.data.recordInfos" stripe>
                <el-table-column type="index" align="center" label="序号" width="50">
                  <template slot-scope="scope">
                    {{ (pageObj.currentPage - 1) * pageObj.pageSize + scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="operateTime" label="时间" min-width="120">
                  <template slot-scope="scope">
                    <div v-if="scope.row.operateTime" class="format-time">
                      <div v-for="item in scope.row.operateTime.split(' ')" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="witnessInfoContent" label="信息记录" min-width="120" />
                <el-table-column prop="witnessStatus" label="状态" min-width="120">
                  <template slot-scope="scope">
                    <!-- INVALID,VALID,TEMP,DELETE,ARCHIVE -->
                    <!-- {{ scope.row.dataStatus }} -->
                    {{ witnessInfoRecordStatusFn(scope.row.witnessStatus) }}
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="记录时间" min-width="120">
                  <template slot-scope="scope">
                    <div v-if="scope.row.createTime" class="format-time">
                      <div v-for="item in scope.row.createTime.split(' ')" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="systemName" label="来源" min-width="110" />
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="data.parentItemName" label="见证事项" min-width="55" />
        <el-table-column prop="data.itemStatus" label="是否正常" width="80">
          <template slot-scope="scope">
            <div>
              {{ witnessItemStatusFn(scope.row.data.itemStatus) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="data.itemName" label="事项说明" min-width="55" />
        <el-table-column prop="data.source" label="记录人" min-width="55" />
        <el-table-column prop="data.witnessRecordTime" label="记录时间" min-width="55">
          <template slot-scope="scope">
            <div v-if="scope.row.data.witnessRecordTime" class="format-time">
              <div v-for="item in scope.row.data.witnessRecordTime.split(' ')" :key="item">
                {{ item }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="data.confirmUserName" label="确认人" min-width="55" />
      </el-table>
    </template>
    <div class="layout-footer ui-pt10">
      <!-- {{ pageObj.total + " " + pageObj.pageSize }} -->
      <pagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :page-sizes="pageObj.pageSizes"
        @pagination="liveListFn"
      />
    </div>
    <span v-if="headerTitle == '审核见证记录'" slot="footer">
      <el-button type="primary" :loading="loading" @click="submitFn">审核见证记录</el-button>
      <el-button @click="cancelFn()">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { subtaskDetail, witnessRecordLists, taskDetail, subtaskReview } from "../../api/api";
  import { FindArrayFn } from "../../utils/utils";
  export default {
    name: "WitnessRecord",
    components: {},
    filters: {
      witnessLinkCode(msg) {
        if (msg == "ZB") {
          return "招标";
        }
        if (msg == "TB") {
          return "投标";
        }
        if (msg == "KB") {
          return "开标";
        }
        if (msg == "PB") {
          return "评标";
        }
        if (msg == "DB") {
          return "定标";
        }
      }
    },
    props: {
      headerTitle: {
        type: String,
        default: "详细"
      },
      type: {
        type: String
      },
      rowData: {
        type: Object,
        default: {}
      },
      id: {
        type: String
      },
      data: {
        type: Array,
        default: []
      },
      initData: {
        type: Object,
        default: {}
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        mergeColumns: [
          {
            key: "index",
            conditions: [1]
          },
          {
            key: "projectName",
            conditions: ["projectName"]
          },
          {
            key: "projectCode",
            conditions: ["projectName"]
          },
          {
            key: "bidSectionName",
            conditions: ["projectName", "bidSectionName"]
          }
        ],
        recordSelected: {},
        taskList: [],
        BaseInfoVisible: false,
        loading: false,
        visible: false,
        keyWord: "",
        detailData: [],
        recordData: [],
        pageObj: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        pageSizes: [10, 20, 30]
      };
    },
    computed: {
      // visible() {
      //   return this.show;
      // },
    },
    watch: {
      // data() {
      //   this.taskList = this.data;
      // },
      show() {
        this.visible = this.show;
        this.detailData = [];
        console.log("this.headerTitle", this.headerTitle);
        if (this.show) {
          if (this.headerTitle == "详情") {
            // rowData;
            console.log("this.rowData", this.rowData);
            this.BaseInfoVisible = true;
            this.masterTaskDetailFn();
          } else if (this.headerTitle == "审核见证记录" || this.headerTitle == "查看见证记录") {
            // this.BaseInfoVisible = this.headerTitle == "查看见证记录";
            this.subtaskDetailFn();
            this.witnessRecordListFn();
          } else if (this.headerTitle == "项目详情") {
            this.BaseInfoVisible = true;
            this.subtaskDetailFn();
          }
        }
      }
    },
    methods: {
      rowClassNameFn({ row, rowIndex }) {
        console.log("row.className", row.className);
        return row.className || "";
      },
      witnessInfoRecordStatusFn(val) {
        const array = this.initData.witnessInfoRecordStatus;
        const obj = FindArrayFn(array, val) || {};
        return obj.label;
      },
      witnessItemStatusFn(val) {
        const array = this.initData.witnessItemStatus;
        const obj = FindArrayFn(array, val) || {};
        return obj.label;
      },
      tenderModeFn(val) {
        const array = this.initData.industryTypeAndTenderMode;
        const obj = FindArrayFn(array, val) || {};
        return obj.label;
      },
      industryFn(val) {
        const array = this.initData.industryTypeAndIndustry;
        const obj = FindArrayFn(array, val) || {};
        return obj.label;
      },
      cancelFn() {
        this.visible = false;
      },
      closeFn() {
        this.BaseInfoVisible = false;
        this.keyWord = "";
        this.$emit("close");
      },
      async submitFn() {
        this.loading = true;
        // let witnessSubTaskId = [];
        await this.subtaskReviewFn();
        this.$emit("submit");
        // this.data.forEach((item) => {
        //   item.witnessSubTaskStatusList.forEach((val) => {
        //     witnessSubTaskId.push(val.witnessSubTaskId);
        //   });
        // });
        // this.witnessSubTaskId = witnessSubTaskId;
        // console.log("witnessSubTaskId", witnessSubTaskId.join());
        // this.$nextTick(() => {
        //   this.subtaskAllocateUserFn();
        // });
      },
      submitSearchFn() {},
      // 审核见证
      async subtaskReviewFn() {
        try {
          this.recordSelected;
          console.log("this.recordSelected", this.recordSelected);
          const recordIds = Object.values(this.recordSelected);
          console.log("recordIds", recordIds);
          // return;
          const p = {
            // witnessTaskId: this.rowData.witnessTaskId,
            recordIds, // 要删除的记录
            witnessSubTaskId: this.rowData.witnessSubTaskId
          };
          // if (p.recordIds.length == 0) {
          //   this.loading = false;
          //   return;
          // }
          const res = await subtaskReview(p);
          if (res.success) {
            this.loading = false;
            // 显示查看见证记录
            this.$message({
              type: "success",
              message: res.message || "操作成功",
              single: true
            });
            // this.detailData = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
        this.visible = false;
      },
      // 主任务详情
      async masterTaskDetailFn() {
        try {
          const p = {
            witnessTaskId: this.rowData.witnessTaskId,
            witnessSubTaskId: this.rowData.witnessSubTaskId
          };
          const res = await taskDetail(p);
          if (res.success) {
            this.detailData = res.data;
            console.log("res.data", res.data);
            this.initProjectInfoArrFn(res.data.witnessProjectInfoList);
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      initProjectInfoArrFn(list) {
        // let list = res.data.witnessProjectInfoList;
        const Arr = [];
        for (let i = 0; i < list.length; i++) {
          const ei = list[i];
          const Obj = Object.assign({}, ei);
          if (ei.bidSectionInfoList.length == 0) {
            Arr.push(Obj);
            break;
          }
          for (let j = 0; j < ei.bidSectionInfoList.length; j++) {
            const ej = ei.bidSectionInfoList[j];
            const Obj2 = Object.assign({}, Obj);
            Obj2.bidSectionName = ej.bidSectionName;
            Obj2.bidSectionCode = ej.bidSectionCode;
            Arr.push(Obj2);
          }
        }
        console.log("Arr", Arr);
        this.$set(this.detailData, "projectInfoArr", Arr);
      },
      // 子任务详情
      async subtaskDetailFn() {
        try {
          const p = { witnessSubTaskId: this.id };
          const res = await subtaskDetail(p);
          if (res.success) {
            this.detailData = res.data;
            if (this.headerTitle != "项目详情") {
              this.detailData.witnessTaskBaseInfo.evaluationStartTime = null;
              this.detailData.witnessTaskBaseInfo.bidOpenStartTime = null;
            } else {
              this.detailData.witnessTaskBaseInfo.witnessUserName = null;
              this.detailData.witnessTaskBaseInfo.witnessLinkCode = null;
            }
            this.initProjectInfoArrFn(res.data.witnessProjectInfoList);
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      // randomFn() {
      //   return this.colorArr.shift();
      // },
      // 见证记录
      async witnessRecordListFn() {
        try {
          const p = {
            pageSize: -1,
            witnessSubTaskId: this.id
          };
          const res = await witnessRecordLists(p);
          if (res.success) {
            const colorArrOld = ["red", "red", "orange", "orange", "green", "green"];
            let colorArr = ["red", "red", "orange", "orange", "green", "green"];
            this.recordData = res.data.result.map((item) => {
              if (colorArr.length == 0) {
                colorArr = [].concat(colorArrOld);
              }
              if (item.data.isCheck) {
                if (item.data.isSystem === "NO") {
                  this.$set(this.recordSelected, item.data.parentItemCode, item.data.recordId);
                  // this.recordSelected[item.data.parentItemCode] =
                  //   item.data.recordId;
                  // } else {
                }
                item.className = `bg-${colorArr.shift()}`;
              }
              return item;
            });
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      // 提交
      async subtaskAllocateUserFn() {}
    }
  };
</script>
<style lang="scss" scoped>
  .daishenhe-tag {
    position: absolute;
    top: 60px;
    right: 15px;
    i {
      font-size: 70px;
      color: $primary;
    }
  }
  .ui-table th,
  .ui-table td {
    width: 275px;
  }
</style>
